<template>
<!--使用v-for 遍历集合数组 -->
  <div>
    <template v-for="menu in menuList">
      <!--   el-submenu 子菜单   -->
      <el-submenu :disabled="menu.disabled" v-if="menu.children.length>0"
      :index="menu.id+'' " :key="menu.id+'' ">
        <template slot="title" style="padding-left: 10px">
            <i :class="menu.icon"></i>
          <span slot="title">{{menu.menuName}}</span>
        </template>
        <!-- 自调用函数:自己调用自己 -->
        <MenuTree :menuList="menu.children"></MenuTree>
      </el-submenu>

      <el-menu-item
      v-else
      :disabled="menu.disabled"
      :index="menu.id+''"
      :key="menu.id+''"
      :route="menu.url"
      style="padding-left: 50px;"
      >
        <i :class="menu.icon"></i>
        <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
  </div>

</template>

<script>
export default {
  name: "MenuTree",
  // 接受父组件传过来的值
  props:['menuList']

}
</script>

<style scoped>
 /*  当菜单水平缩进的时候,只显示icon图标,不消失文字,并且光标移动上去弹出一个框,*/
 .el-menu--collapse span,
 .el-menu--collapse i.el-submenu__icon-arrow {
   height: 0;
   width: 0;
   overflow: hidden;
   visibility: hidden;
   display: inline-block;
 }
 /*点击二级菜单需要给选中的菜单名称加上对应样式*/
 #app > section > section > aside > ul > div > li.el-submenu.is-opened > ul > div > li.el-menu-item.is-active{
   color: #FFFFFF;
   border: 2px solid #426fb9;
   padding: 3px 28px;
   margin: 5px 20px;
   height: 40px;
   line-height: 30px;
   border-radius: 10px;
   min-width: 0px;
 }
</style>
